<template>
    <view
        class="inline-block relative"
        :class="[classes, colorClass, bgColorClass]"
        :style="[
            styles,
            {
                color: colorStyle,
                backgroundColor: bgColorStyle
            }
        ]"
    >
        <!-- textarea -->
        <block v-if="type === 'textarea'">
            <textarea
                class="width-p100 input"
                style="height: 100rpx; max-height: 600rpx;"
                :auto-height="autoHeight"
                :confirm-type="confirmType"
                :disabled="disabled"
                :focus="focus"
                :maxlength="maxlength"
                :placeholder="placeholder2"
                :placeholder-class="placeholderColorClass"
                :placeholder-style="`color: ${placeholderColorStyle};`"
                :selection-end="selection[1]"
                :selection-start="selection[0]"
                :value="value1"
                @input="handleInput"
                @focus="$emit('focus', { detail: $event.detail })"
                @blur="$emit('blur', { detail: $event.detail })"
                @confirm="$emit('confirm', { detail: $event.detail })"
            ></textarea>
            <view
                v-if="!disabled && (maxlength > 0 || (clearable && value1 !== ''))"
                class="flex justify-end align-center margin-top-xs text-sm text-grey"
                style="line-height: 24rpx;"
            >
                <view v-if="clearable && value1 !== ''" @click="handleClear">清空</view>
                <view v-if="maxlength > 0" class="margin-left-sm">
                    {{ `${value1.length}/${maxlength}` }}
                </view>
            </view>
        </block>
        <!-- input -->
        <view v-else class="flex align-center">
            <input
                class="flex-sub input"
                :confirm-type="confirmType"
                :disabled="disabled"
                :focus="focus"
                :maxlength="maxlength"
                :placeholder="placeholder2"
                :placeholder-class="placeholderColorClass"
                :placeholder-style="`color: ${placeholderColorStyle};`"
                :selection-end="selection[1]"
                :selection-start="selection[0]"
                :type="inputType"
                :password="password"
                :value="value1"
                @input="handleInput"
                @focus="$emit('focus', { detail: $event.detail })"
                @blur="$emit('blur', { detail: $event.detail })"
                @confirm="$emit('confirm', { detail: $event.detail })"
            />
            <uxt-icon
                v-if="!disabled && clearable && value1 !== ''"
                color="grey"
                type="times-circle"
                @click="handleClear"
            ></uxt-icon>
            <uxt-icon
                v-if="type === 'password'"
                color="grey"
                :type="passIcon"
                @click="handleSwitchPass"
            ></uxt-icon>
            <view v-if="!disabled && maxlength > 0" class="margin-left-xs text-grey">
                {{ `${value1.length}/${maxlength}` }}
            </view>
        </view>
    </view>
</template>

<script>
import baseMixin from '../mixins/base.js'
import inputMixin from '../mixins/input.js'
import formMixin from '../mixins/form.js'
import uxtIcon from './uxt-icon.vue'

export default {
    name: 'uxt-input',
    mixins: [baseMixin, inputMixin, formMixin],
    components: {
        uxtIcon
    },
    props: {
        value: {
            default: ''
        },
        bgColor: {
            default: ''
        }
    },
    data() {
        return {
            passIcon: 'eye',
            password: this.type === 'password'
        }
    },
    computed: {
        placeholderColorClass() {
            return this.getColor(this.placeholderColor, 'text-').classes
        },
        placeholderColorStyle() {
            return this.getColor(this.placeholderColor).styles
        },
        inputType() {
            if (this.type === 'password') {
                return 'text'
            } else {
                return this.type
            }
        },
        placeholder2() {
            return this.disabled && this.placeholder === '请输入' ? '' : this.placeholder
        }
    },
    watch: {
        type(newVal, oldVal) {
            this.password = newVal === 'password'
        }
    },
    methods: {
        handleInput(e) {
            this.value1 = e.detail.value
            this.$emit('input', this.value1)
        },
        handleClear() {
            this.value1 = ''
            this.$emit('input', '')
            this.$emit('clear')
        },
        // 切换密码显示
        handleSwitchPass() {
            this.password = !this.password
            if (this.password) {
                this.passIcon = 'eye'
            } else {
                this.passIcon = 'eye-slash'
            }
        },
        reset(value) {
            if (this.value1 !== value) {
                this.value1 = value
                this.$emit('input', this.value1)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.input {
    font-size: inherit;
    text-align: left;
}
</style>
